<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/page/public/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>思创微尔</title>

  <link rel="stylesheet" href="${ctx}/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="${ctx}/css/index.css">
</head>
<body>
  <div class="page">
    <div class="pages page1">
      <div class="layui-fluid shouye">
          <%@ include file="aheader.jsp"%>

     </div>
        <div class="main_con">
            <div class="left_title animated fadeInDown" style="margin-top:0px;text-align:left;height:20px;">
                思创微尔
            </div>

            <div class="left_info animated fadeInLeft" style="margin-top:10px;margin-left:270px;">
                <h2>以科技兴教育文化传承 </h2>
                <h2>以大爱观小爱成就大爱</h2>
            </div>
            <div class="left_info animated fadeInLeft" style="margin-top:-20px;margin-left:670px;">
                <h2>以思创为国燃星星之火</h2>
                <h2>以为国效力而奉献终身</h2>
            </div>
        </div>
    </div>
      <c:if test="${catlist[0].delFlag==0}">
    <div class="pages page2">
        <div class="main_con">
            <div class="left_title animated fadeInDown">
              ${catlist[0].name}
            </div>
            <div class="left_info animated fadeInLeft">
                ${catlist[0].viewConfig}
            </div>
        </div>
    </div>
      </c:if>
      <c:if test="${catlist[1].delFlag==0}">
    <div class="pages page3">
        <div class="main_con">
            <div class="left_title animated fadeInDown">
                    ${catlist[1].name}
            </div>
            <div class="animated bounceInLeft">
                <div class="layui-row">
                  <div class="layui-col-md4 yewu">
                    <img src="${ctx}/images/wangye.png">
                    <p class="title">网站建设</p>
                    <p class="subtitle">网页设计</p>
                    <p class="subtitle">程序开发</p>
                    <p class="subtitle">服务器部署</p>
                  </div>
                  <div class="layui-col-md4 yewu">
                    <img src="${ctx}/images/shouji.png">
                    <p class="title">安卓开发</p>
                    <p class="subtitle">网页设计</p>
                    <p class="subtitle">程序开发</p>
                    <p class="subtitle">服务器部署</p>
                  </div>
                  <div class="layui-col-md4 yewu">
                    <img src="${ctx}/images/weixin.png">
                    <p class="title">微信开发</p>
                    <p class="subtitle">网页设计</p>
                    <p class="subtitle">程序开发</p>
                    <p class="subtitle">服务器部署</p>
                  </div>
                </div>
            </div>
        </div>
    </div>
      </c:if>
      <c:if test="${catlist[2].delFlag==0}">
          <div class="pages page4">
              <div class="main_con">
                  <div class="left_title animated fadeInDown">
                          ${catlist[2].name}
                  </div>
                  <div class="animated bounceInLeft">
                      <div class="layui-row">
                          <div class="layui-col-md6 dongtai">
                              <img src="${ctx}/images/news.png">
                          </div>
                          <div class="layui-col-md6 dongtai">
                              <ul class="news_ul">

                              </ul>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </c:if>
      <c:if test="${catlist[3].delFlag==0}">
    <div class="pages page4">
        <div class="main_con">
            <div class="left_title animated fadeInDown">
                    ${catlist[3].name}
            </div>
            <div class="animated bounceInLeft">
                <div class="layui-row">
                  <div class="layui-col-md6 dongtai">
                    <img src="${ctx}/images/news.png">
                  </div>
                  <div class="layui-col-md6 dongtai">
                    <ul class="news_ul">
                        <c:forEach items="${articlelist}" var="article">
                      <li>
                        <p class="news_title"><a href="${ctx}/web/articlecontent/${article.id}" >${article.title}</a></p>
                        <p class="news_content"><a href="${ctx}/web/articlecontent/${article.id}" >${article.content}</a></p>
                      </li>
                        </c:forEach>
                      <li>
                        <p class="news_content"><a href="${ctx}/web/articlelist/${article.id}" >更多...</a></p>
                      </li>
                    </ul>
                  </div>
                </div>
            </div>
        </div>
    </div>
      </c:if>
    <%--<ul class="right_ul">--%>
        <%--<li class="active"></li>--%>
        <%--<li></li>--%>
        <%--<li></li>--%>
        <%--<li></li>--%>
    <%--</ul>--%>

</div>

<script src="${ctx}/layui/layui.js"></script>
<script src="${ctx}/js/jquery-1.10.1.js"></script>
<script src="${ctx}/js/jquery.mousewheel.js"></script>
<script>

  layui.use('element', function(){
  var element = layui.element;
  
});

    // $(function () {
    //     //添加动画效果
    //     $(".page1").addClass("moving");
    //     //获取当前可视区域的高度
    //     $h = $(window).height();
    //     //获取到pages盒子，将获取到的可视区域的高度赋给pages这个盒子的高度
    //     $(".page .pages").css("height",$h);
    //     //初始化一个变量，作用是充当元素的下标
    //     var num = 0;
    //     //初始化一个变量，用来保存定时器
    //     var timer = null;
    //     //给窗口添加滚轮事件
    //     $(window).mousewheel(function (e,dat) {
    //         clearTimeout(timer)
    //         timer = setTimeout(function () {
    //             if(dat <= -1){
    //                 num++;
    //             }else{
    //                 num--;
    //             }
    //             if(num > $(".pages").length - 1){
    //                 num = 3;
    //             }else  if(num < 0){
    //                 num = 0
    //             }
    //             //调用动画效果
    //             $(".pages").eq(num).addClass("moving").siblings().removeClass("moving");
    //             //设置滚动距离
    //             $(".page").animate({top : -$h * num},300);
    //             //设置滚动添加的类名
    //             $("ul li").eq(num).addClass("active").siblings().removeClass("active");
    //         },300)
    //     })
    //
    //     $("ul li").click(function () {
    //         var _index = $(this).index();
    //         $(this).addClass("active").siblings().removeClass("active");
    //         $(".page").animate({top : -$h * _index},300);
    //     })
    // })
</script>
</body>
</html>